<template>
  <div>
    <div
      v-for="(item, index) in platformFields"
      :key="index"
      :style="(['微信视频号', '快手'].includes(platformName) && item.key === 'moreJournalInfo') ? 'margin-top: 32px' : 'margin-top: 23px'"
      class="field-form"
    >
      <Title
        v-if="item.type === 'title'"
        :title="item.name"
        :style="(['微信视频号', '快手'].includes(platformName) && item.key === 'journalInfo') ? 'margin-bottom: 16px' : 'margin-bottom: 7px'"
      />
      <el-form
        v-if="item.children"
        ref="baseform"
        :class="{'mobile-el-form': showMobilePage}"
        :label-position="showMobilePage?'left':'right'"
        class="lineHeight32 base-form"
        label-width="165px">
        <el-row :gutter="20" :class="{'dividing': !showMobilePage}" class="response-el-row" type="flex" style="margin: 0;">
          <el-col v-for="(ele, ind) in item.children" :key="ind" :span="ele.span || 12" :class="{ 'responsive-col-lg-8': !ele.span, 'switch-col': ele.type === 'switch', 'indentation-form-item': ele.indentLabel }">
            <el-row v-if="ele.type === 'checkbox'" class="switch-row">
              <el-col :span="8">
                <div class="flex-center">
                  <el-checkbox v-if="ele.type === 'checkbox' && accountInfo[item.key] && accountInfo[item.key][ele.key]" v-model="accountInfo[item.key][ele.key].isConfirm" disabled/>
                  <el-checkbox v-if="ele.type === 'checkbox' && (!accountInfo[item.key] || !accountInfo[item.key][ele.key])" :value="false" disabled/>
                  <span class="label">{{ ele.label }}</span>
                </div>
              </el-col>
              <el-col v-if="ele.appendLabel" :span="16">
                <div class="flex" style="overflow: hidden;">
                  <span class="label" style="min-width: 42px;">{{ ele.appendLabel }}：</span>
                  <template v-if="accountInfo[item.key][ele.key]">
                    <ToolTip v-if="ele.appendLabelType === 'string'" :content="accountInfo[item.key][ele.key].timeLimit || '--'" class="label-value" />
                    <ToolTip
                      v-else
                      :content="accountInfo[item.key][ele.key].cost"
                      :tool-tip="accountInfo[item.key][ele.key].cost"
                      class="label-value" />
                  </template>
                  <span v-else class="label">--</span>
                </div>
              </el-col>
            </el-row>
            <el-form-item v-else :label="`${ele.label}：`">
              <span v-if="ele.key !== 'talentSharingRatio' && (!accountInfo[item.key] || (accountInfo[item.key] && accountInfo[item.key][ele.key] !== 0 && accountInfo[item.key][ele.key] !== false && !accountInfo[item.key][ele.key]))">--</span>
              <div v-else>
                <ToolTip v-if="!ele.type" :content="accountInfo[item.key][ele.key]" />
                <div v-else-if="ele.type === 'select'">
                  <span>{{ formatOptionValue(accountInfo[item.key][ele.key], ele.option) }}</span>
                </div>
                <div v-else-if="ele.type === 'journalNodeFilter'">
                  {{ accountInfo[item.key][ele.key] | journalNodeFilter }}
                </div>
                <div v-else-if="ele.type === 'rank'">
                  {{ accountInfo[item.key][ele.key] | recommendRankFilter }}
                </div>
                <div v-else-if="ele.type === 'cooperationStatusFilter'">
                  {{ accountInfo[item.key][ele.key] | cooperationStatusFilter }}
                </div>
                <div v-else-if="ele.type === 'platform'" class="flex-center">
                  <PlatformIcon :data="accountInfo[item.key][ele.key]" />
                  {{ accountInfo[item.key][ele.key] || '--' }}
                </div>
                <div v-else-if="ele.type === 'gender'">
                  {{ accountInfo[item.key][ele.key] ? '女' : '男' }}
                </div>
                <div v-else-if="ele.type === 'number'">
                  <ToolTip
                    :content="accountInfo[item.key][ele.key] | numberTextFormat(2)"
                    :tool-tip="accountInfo[item.key][ele.key] | moneyFilter" />
                </div>
                <div v-else-if="ele.type === 'ratio'">
                  <span v-if="ele.restRatio">{{ (100 - accountInfo[item.key][ele.restRatio]).toFixed(2) }}%</span>
                  <span v-else>{{ accountInfo[item.key][ele.key] }}%</span>
                </div>
                <div v-else-if="ele.type === 'cost'">
                  <span v-if="!accountInfo[item.key][ele.key].value && accountInfo[item.key][ele.key].value !== 0">--</span>
                  <span v-else-if="accountInfo[item.key][ele.key].costType === 1">利润分成 | {{ accountInfo[item.key][ele.key].value }}%</span>
                  <ToolTip
                    v-else
                    :content="formatPrice(accountInfo[item.key][ele.key].value, 1)"
                    :tool-tip="formatPrice(accountInfo[item.key][ele.key].value)"
                    class="label-value" />
                </div>
                <div v-else-if="ele.type === 'mulUser'">
                  <CheckUserInfo v-if="accountInfo[item.key][ele.key]" :multiple="true" :user-list="accountInfo[item.key][ele.key]" :label-name="'userName'" />
                </div>
                <div v-else-if="ele.type === 'tag'" :class="{'labels': accountInfo[item.key][ele.key].length}">
                  <!-- <template v-if="accountInfo[item.key][ele.key].length">
                    <span v-for="(item, index) in accountInfo[item.key][ele.key]" :key="index" class="item-wrap">
                      <el-tooltip v-if="item.name.length > 20" class="item" effect="dark">
                        <div slot="content" style="max-width: 200px;">{{ item.name }}</div>
                        <el-tag plain size="mini">{{ item.name }}</el-tag>
                      </el-tooltip>
                      <el-tag v-else plain size="mini">{{ item.name }}</el-tag>
                    </span>
                  </template>
                  <span v-else>--</span> -->
                  <TagSelect v-model="accountInfo[item.key][ele.key]" mode="detail" />
                </div>
                <div v-else-if="ele.type === 'link'">
                  <span class="account-text" @click="toResourceDetail">{{ accountInfo[item.key][ele.key] }}</span>
                </div>
                <div v-else-if="ele.type === 'time'">
                  <ToolTip :content="format(accountInfo[item.key][ele.key], ele.format || 'YYYY/MM/DD HH:mm')" />
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import PlatformIcon from '@/components/Common/platformIcon';
import TagSelect from '@/components/Common/tagSelect';
import { journalNodeFilter, recommendRankFilter } from '@/utils/const/resouce';
import { cooperationStatusFilter } from '@/utils/accountCommonData';
import { numberTextFormat, moneyFilter } from '@/filters/number';
import { hasRouteAuth } from '@/utils/permission';
import { format } from '@/filters/date';

export default {
  components: { Title, PlatformIcon, TagSelect },
  filters: { numberTextFormat, moneyFilter, journalNodeFilter, cooperationStatusFilter, recommendRankFilter },
  props: {
    showMobilePage: {
      type: Boolean,
      default: false
    },
    accountInfo: {
      type: Object,
      default() {
        return {};
      }
    },
    platformFields: {
      type: Array,
      default() {
        return [];
      }
    },
    platformName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      voiceOption: [{ value: 0, label: '否' }, { value: 1, label: '口播' }, { value: 2, label: '机配' }],
      cameraOption: [{ value: false, label: '否' }, { value: true, label: '是' }]
    };
  },
  methods: {
    format,
    numberTextFormat,
    moneyFilter,
    hasRouteAuth,
    formatOptionValue(value, option = '') {
      const options = this[option] || [];
      const res = options.filter(item => {
        return item.value === value;
      });
      if (res.length) {
        return res[0].label;
      } else {
        return '--';
      }
    },
    formatPrice(data, unit = 0) {
      let res = '';
      if (unit) {
        res = numberTextFormat(data, 2);
      } else {
        res = moneyFilter(data);
      }
      return `固定价格 | ${res}`;
    },
    toResourceDetail() {
      if (this.hasRouteAuth('medium:resource:admin')) {
        const routeUrl = this.$router.resolve({
          name: 'detailResource',
          params: { resourceId: this.accountInfo.id }
        });
        window.open(routeUrl.href, '_blank');
      } else {
        this.$message.warning('您暂无账号资源可读权限，请联系管理员添加');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.indentation-form-item {
  ::v-deep .el-form-item {
    label {
      line-height: 1.2 !important;
    }
  }
}
.switch-col {
  &:first-of-type {
    margin-top: 7px;
  }
  &::v-deep {
    padding-left: 0 !important;
  }
}
.switch-row {
  margin-bottom: 16px;
}
.label {
  margin-left: 16px;
  font-size: 14px;
  color: #666;
}
.label-value {
  font-size: 14px;
  color: #666;
}
.base-form {
  &::v-deep {
    .dividing{
      .el-col {
        padding: 0 !important;
        .el-form-item__content {
          border-right: 1px solid #EBEEFD;
        }
        @media only screen and (min-width: 1300px) {
          &:nth-child(3n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        @media screen and (max-width: 1300px) {
          &:nth-child(2n) {
            .el-form-item__content {
              border-right: none;
            }
          }
        }
        &:last-child {
          .el-form-item__content {
            border-right: none;
          }
        }
      }
    }
    .explanation-container{
      .explanation{
        padding-left: 32px!important;
      }
    }
  }
}
.el-form-item {
  margin-bottom: 0;
}
.labels {
  padding-top: 5px;
  line-height: normal;
  .item-wrap {
    display: inline-block;
    height: 24px;
  }
  .el-tag {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 5px;
    background:rgba(239,243,251,1);
    border-radius:4px;
    border: none;
    padding: 2px 8px;
    font-size:12px;
    font-weight:400;
    color:rgba(64,110,255,1);
  }
}
.account-text {
  font-size: 14px;
  color: #406eff;
  cursor: pointer;
}
</style>
